<template>
  <div class="header">
    <el-row type="flex" justify="space-between" class="main">
      <div class="logo">
        <nuxt-link to="/">
          <img src="../assets/header.png" alt />
        </nuxt-link>
      </div>
      <el-row type="flex" class="navs">
        <nuxt-link to="/">首页</nuxt-link>
        <nuxt-link to="/strategy">游记攻略</nuxt-link>
        <nuxt-link to="/spot">景点</nuxt-link>
        <!-- <nuxt-link to="/about">临时</nuxt-link> -->
        <!-- <nuxt-link to="/about">个人主页</nuxt-link> -->
      </el-row>
      <div class="loginbox">
        <div v-if="$store.state.user.userInfo.token">
          <el-popover placement="top-start" trigger="hover" content="点击头像可以进个人主页哦">
            <img
              class="avatar"
              slot="reference"
              @click="enterGeren"
              :src="'http://localhost:8010/getImage?name='+$store.state.user.userInfo.user.avatar_Url"
              alt
            />
          </el-popover>
          &ensp;{{$store.state.user.userInfo.user.nickname}}
          <div class="lv">LV.{{$store.state.user.userInfo.user.level}}</div>
          <a href @click="exit()">退出</a>
        </div>
        <div v-else>
          <el-button type="text" @click="$router.push('/user/login')">登录</el-button>
          <el-button type="text">/</el-button>
          <el-button type="text" @click="$router.push('/user/register')">注册</el-button>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  methods: {
    enterGeren() {
      this.$router.push("/user");
    },
    exit(){
      this.$router.push("/")
      this.$store.commit('user/clearUserInfo')
    }
  }
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
ul,
li,
ol {
  list-style: none;
}
a {
  color: #333;
  text-decoration: none;
}
em,
i {
  font-style: normal;
}
.header {
  height: 60px;
  line-height: 60px;
  border-bottom: solid 1px #ddd;
  box-shadow: 0 2px 2px #eee;
  .main {
    width: 1700px;
    margin: 0 auto;
    .logo {
      display: block;
      img {
        height: 50px;
        vertical-align: middle;
        margin: 0 40px;
      }
    }
    .navs {
      flex: 1;
      a {
        display: block;
        padding: 0 30px;
        height: 60px;
        box-sizing: border-box;
        &:hover {
          border-bottom: solid 3px #27c18f;
          color: #27c18f;
        }
      }
      .nuxt-link-exact-active {
        background: #27c18f;
        color: #fff !important;
      }
    }
    .loginbox {
      .avatar {
        height: 30px;
        width: 30px;
        border-radius: 50px;
        vertical-align: middle;
         object-fit: cover;
        &:hover {
          cursor: pointer;
        }
      }
      a {
        color: rgb(252, 98, 98);
      }
      .lv {
        display: inline-block;
        background: #ff9500;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        padding: 2px 4px;
        border-radius: 4px;
        margin: 0 3px;
      }
    }
  }
}
</style>>
